<script>
import { reactive } from "@vue/reactivity";
import { useStore } from "../store/index";
import { public_status } from "../store/public_status";
import { useRouter } from "vue-router";
export default {
  setup() {
    let userId = localStorage.getItem("P4_userId");
    const userData = useStore().userData[userId];

    let data = reactive({});

    // # 路由配置
    let router = useRouter();

    public_status().display = true; // # 底部导航栏显示隐藏 购物车高度
    public_status()._isShow = true; // # 底部导航栏显示隐藏 购物车高度

    console.log(userData);

    let outLogin = () => {
      localStorage.setItem("P4_userId", "");
      router.push("/login");
    };

    return {
      data,
      userData,

      outLogin,
    };
  },
};
</script>

<template>
  <div class="myView">
    <!-- 头部 -->
    <div class="my_top">
      <div class="left">
        <div class="logo">
          <img
            :src="
              userData.imgUrl
                ? userData.imgUrl
                : require('../assets/imgs/莫高窟第57窟-佛.svg')
            "
            alt=""
          />
        </div>

        <div class="title">{{ userData.name ? userData.name : "新用户" }}</div>
      </div>

      <div>
        <span class="iconfont icon-saoyisao"></span>
      </div>
    </div>
    <!-- 头部 -->

    <!-- 余额 -->
    <div class="my_box">
      <!-- 优惠卷 -->
      <ul class="ticket">
        <li class="item">
          <ol class="left">
            <li class="olist"></li>
            <li class="olist"></li>
            <li class="olist"></li>
            <li class="olist"></li>
            <li class="olist"></li>
          </ol>
          <ol class="right">
            <li class="olist"></li>
            <li class="olist"></li>
            <li class="olist"></li>
            <li class="olist"></li>
            <li class="olist"></li>
          </ol>
          <!--优惠券内容 -->
          <div class="blance">
            <h3>满减券</h3>
            <h6>全场满减</h6>
          </div>
          <div class="togo"><span class="iconfont icon-jiantouyou"></span></div>
          <!--优惠券内容 -->
        </li>
        <li class="item">
          <!-- 小点点 -->
          <ol class="left">
            <li class="olist"></li>
            <li class="olist"></li>
            <li class="olist"></li>
            <li class="olist"></li>
            <li class="olist"></li>
          </ol>
          <ol class="right">
            <li class="olist"></li>
            <li class="olist"></li>
            <li class="olist"></li>
            <li class="olist"></li>
            <li class="olist"></li>
          </ol>
          <!-- 小点点 -->
          <!--优惠券内容 -->
          <div class="blance">
            <h3>打折券</h3>
            <h6>全场打折</h6>
          </div>
          <div class="togo"><span class="iconfont icon-jiantouyou"></span></div>
          <!--优惠券内容 -->
        </li>
      </ul>
      <!-- 优惠卷 -->

      <div class="money">
        <span>余额</span>
        <h3><span>￥</span>{{ userData.balance }}.00</h3>
      </div>

      <router-link to="/Wallet" class="wallet">
        <div class="lo">￥</div>
        <div class="bag">钱包</div>
        <span class="iconfont icon-jiantouyou"></span>
      </router-link>
    </div>
    <!-- 余额 -->

    <!-- 订单 -->
    <div class="order">
      <div class="title">我的订单</div>

      <!-- 订单列表 -->
      <ul class="orderlist">
        <router-link to="/myOrder?index=0" class="serve">
          <div class="serving iconfont icon-dingdan"></div>
          <h5>全部订单</h5>
        </router-link>
        <router-link to="/myOrder?index=0" class="serve">
          <div class="serving iconfont icon-daifukuan"></div>
          <h5>待付款</h5>
        </router-link>
        <router-link to="/myOrder?index=0" class="serve">
          <div class="serving iconfont icon-daifahuo"></div>
          <h5>待发货</h5>
        </router-link>
        <router-link to="/myOrder?index=0" class="serve">
          <div class="serving iconfont icon-yifahuo"></div>
          <h5>待收货</h5>
        </router-link>
      </ul>
      <!-- 订单列表 -->

      <!-- 其他功能 -->
      <ol class="dolist">
        <router-link to="/address" class="doitem">
          <span>配送地址</span>
          <span class="togo iconfont icon-jiantouyou"></span>
        </router-link>
        <router-link to="/collect" class="doitem">
          <span>我的收藏</span>
          <span class="togo iconfont icon-jiantouyou"></span>
        </router-link>

        <router-link to="/account" class="doitem">
          <span>账户设置</span>
          <span class="togo iconfont icon-jiantouyou"></span>
        </router-link>
        <router-link to="/service" class="doitem">
          <span>联系客服</span>
          <span class="togo iconfont icon-jiantouyou"></span>
        </router-link>
      </ol>

      <!-- 退出登录按钮 -->
      <div class="unload" @click="outLogin">
        <button class="btn">退出登录</button>
      </div>
    </div>
    <!-- 订单 -->
  </div>
</template>

<style lang="scss" scoped>
.myView {
  padding-bottom: 100px;

  // 头部
  .my_top {
    margin: 20px 15px;
    height: 60px;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .left {
      display: flex;
      align-items: center;

      .logo {
        width: 60px;
        height: 60px;
        background-color: rgb(238, 236, 236);
        border-radius: 50%;

        img {
          width: 60px;
          height: 60px;
          border-radius: 50%;
        }
      }
      .title {
        font-size: 24px;
        color: #0f0f0f;
        font-weight: 600;
        margin: 0 10px;
      }
    }
    .icon-saoyisao {
      font-size: 20px;
      font-weight: 600;
    }
  }

  // 余额
  .my_box {
    margin: 0 15px;
    padding: 10px 0 20px;
    background-color: #1d1e22;
    border-radius: 15px;
    position: relative;

    // 票据
    .ticket {
      padding: 8px 20px;
      display: flex;
      justify-content: space-between;

      .item {
        width: 48%;
        height: 58px;
        background-color: #3fdfb0;
        position: relative;
        display: flex;
        justify-content: space-between;

        // overflow: hidden;
        box-shadow: 0px -5px 10px 3px rgba($color: #000000, $alpha: 0.3) inset;

        .blance {
          margin-left: 10px;

          h3 {
            margin-left: 4px;
            font-size: 16px;
            font-weight: 700;
            margin-top: 12px;
            span {
              font-size: 13px;
              color: rgba(0, 0, 0, 0.7);
              font-weight: 600;
            }
          }
          h6 {
            font-size: 10px;
            color: rgba(0, 0, 0, 0.7);
            font-weight: 600;
            scale: 0.8;
          }
        }

        .togo {
          margin-top: 20px;
          margin-right: 15px;
          width: 20px;
          height: 20px;
          background-color: #1aba8b;
          border-radius: 50%;
          display: flex;
          justify-content: center;
          align-items: center;
          .icon-jiantouyou {
            font-size: 10px;
            scale: 0.8px;
            font-weight: 600;
          }
        }

        ol {
          height: 100%;
          position: absolute;
          top: 0px;
          display: flex;
          flex-direction: column;
          justify-content: space-evenly;

          &.left {
            left: -3px;
          }

          &.right {
            right: -3px;
          }

          .olist {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background-color: #1d1e22;
          }
        }
      }
    }

    // 余额
    .money {
      margin-left: 15px;
      margin-top: 10px;

      span {
        color: rgb(255, 255, 255, 0.6);
        font-size: 10px;
        line-height: 10px;
        margin-right: 3px;
      }

      h3 {
        font-size: 20px;
        line-height: 20px;
        font-weight: 700;
        color: #fbfbfa;
        margin-top: 10px;

        display: flex;
        align-items: center;
      }
    }

    // 钱包
    .wallet {
      position: absolute;
      right: 0px;
      bottom: 20px;
      width: 72px;
      height: 36px;
      background-color: #3fdfb0;
      border-top-left-radius: 18px;
      border-bottom-left-radius: 18px;
      text-align: center;
      line-height: 36px;
      display: flex;
      align-items: center;
      font-size: 13px;
      color: rgb(0, 0, 0, 0.6);
      font-weight: 600;
      .lo {
        font-size: 10px;
        scale: 0.8;
        color: #fff;
        background-color: #04b77f;
        width: 20px;
        height: 20px;
        line-height: 20px;
        border-radius: 50%;
        margin-left: 8px;
      }

      .icon-jiantouyou {
        font-size: 11px;
      }
    }
  }

  // 订单
  .order {
    margin: 6px 15px;
    .title {
      font-weight: 700;
      font-weight: 18px;
      color: #171717;
      height: 52px;
      line-height: 52px;
    }

    .orderlist {
      display: flex;

      .serve {
        text-align: center;
        width: 25%;
        .serving {
          font-size: 24px;
          color: #0f0f0f;
          font-weight: 700;
        }
        h5 {
          font-size: 11px;
          font-weight: 600;
          color: #343434;
          height: 26px;
          line-height: 26px;
        }
      }
    }
    .dolist {
      .doitem {
        display: flex;
        justify-content: space-between;
        height: 55px;
        line-height: 55px;
        margin-top: 10px;

        span {
          font-size: 17px;
          font-weight: 700;
          color: #1a1a1a;
        }
        span.togo {
          font-size: 12px;
          font-weight: 600;
          color: #b8b8b8;
        }
      }
    }
  }
  // 退出登录按钮
  .unload {
    padding: 30px 50px;
    .btn {
      height: 45px;
      width: 100%;
      color: #fff;
      border-radius: 7px;
      font-weight: 600;

      background-color: #343434;
    }
  }
}
</style>